<template>
    <div class="boxCasual">
      <div>
        <p><router-link :to="{name:'Game'}"><span><</span></router-link>休闲益智<img src="../assets/小图标/搜索.png"></p>
      </div>
      <!-- navbar -->
      <mt-navbar v-model="selected" fixed style="margin-top: 1.2rem;">
        <mt-tab-item id="1">全部</mt-tab-item>
        <mt-tab-item id="2">儿童益智</mt-tab-item>
      </mt-navbar>
      <!-- tabcontainer -->
      <mt-tab-container v-model="selected" style="margin-top: 2.5rem;">
        <mt-tab-container-item id="1">
          <mt-navbar v-model="selecteds">
            <span class="boxTab"><mt-tab-item id="3">推荐</mt-tab-item></span>
            <span class="boxTab"><mt-tab-item id="4">最新上架</mt-tab-item></span>
            <span class="boxTab"><mt-tab-item id="5">最多安装</mt-tab-item></span>
            <span class="boxTab"><mt-tab-item id="6">最多安装</mt-tab-item></span>
          </mt-navbar>
          <!-- tabcontainer -->
          <mt-tab-container v-model="selecteds">
            <mt-tab-container-item id="3">
              <div v-for="(item,index) in newdata" :key="index">
                <div class="left">
                  <img :src="item.img">
                </div>
                <div class="right">
                  <p>{{item.name}}</p>
                  <p>{{item.active}}</p>
                  <p>{{item.activeOne}}</p>
                  <span>{{item.btn}}</span>
                </div>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
              <div style="clear: both" v-for="(item,index) in newdatas" :key="index">
                <div class="left">
                  <img :src="item.img">
                </div>
                <div class="right">
                  <p>{{item.name}}</p>
                  <p>{{item.active}}</p>
                  <p>{{item.activeOne}}</p>
                  <span>{{item.btn}}</span>
                </div>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="5">
              <div v-for="(item,index) in newdata" :key="index">
                <div class="left">
                  <img :src="item.img">
                </div>
                <div class="right">
                  <p>{{item.name}}</p>
                  <p>{{item.active}}</p>
                  <p>{{item.activeOne}}</p>
                  <span>{{item.btn}}</span>
                </div>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="6">
              <div style="clear: both" v-for="(item,index) in newdatas" :key="index">
                <div class="left">
                  <img :src="item.img">
                </div>
                <div class="right">
                  <p>{{item.name}}</p>
                  <p>{{item.active}}</p>
                  <p>{{item.activeOne}}</p>
                  <span>{{item.btn}}</span>
                </div>
              </div>
            </mt-tab-container-item>
          </mt-tab-container>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <mt-navbar v-model="selectedss">
            <span class="boxTab"><mt-tab-item id="5">推荐</mt-tab-item></span>
            <span class="boxTab"><mt-tab-item id="6">最新上架</mt-tab-item></span>
          </mt-navbar>
          <!-- tabcontainer -->
          <mt-tab-container v-model="selectedss">
            <mt-tab-container-item id="5">
              <div v-for="(item,index) in newdata" :key="index">
                <div class="left">
                  <img :src="item.img">
                </div>
                <div class="right">
                  <p>{{item.name}}</p>
                  <p>{{item.active}}</p>
                  <p>{{item.activeOne}}</p>
                  <span>{{item.btn}}</span>
                </div>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="6">
              <div style="clear: both" v-for="(item,index) in newdatas" :key="index">
                <div class="left">
                  <img :src="item.img">
                </div>
                <div class="right">
                  <p>{{item.name}}</p>
                  <p>{{item.active}}</p>
                  <p>{{item.activeOne}}</p>
                  <span>{{item.btn}}</span>
                </div>
              </div>
            </mt-tab-container-item>
          </mt-tab-container>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Casual",
      data(){
          return{
            selected: '1',
            selecteds:'3',
            selectedss:'5',
            getUrl:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/use",
            newdata:[],
            getUrls:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/recommend",
            newdatas:[],
          }
      },
      methods:{
        gets(){
          axios.get(this.getUrl)
            .then(res=>{
              this.newdata = res.data.data;
              console.log(this.newdata)
            })
            .catch(error=>{
              console.log(error)
            });
          axios.get(this.getUrls)
            .then(res=>{
              this.newdatas = res.data.data;
              console.log(this.newdatas)
            })
        }
      },
      mounted() {
        this.gets();
      }
    }
</script>

<style scoped>
@import "../assets/css/casual.css";
</style>
